<template>
	<u-popup v-model="value" mode="bottom" border-radius="20" height="auto" @close="close" :popup="false" :safeAreaInsetBottom="true">
		<view class="search-popup-content" :style="{ height: height + 'px' }">
			<view class="search-bar"><u-search @change="handleSearchBar" :placeholder="title" v-model="keyword" action-text="取消" @custom="cancel" @search="search"></u-search></view>
			<view class="search-scroll" :style="{ height: scrollHeight + 'px' }">
				<mescroll-uni ref="mescrollRef" :height="scrollHeight + 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<u-cell-group :border="false">
						<u-cell-item @click="clickItem" :index="index" :center="true" :title="item.name" :label="item.subsidiary ? item.subsidiary.name : ''" v-for="(item, index) in searchResultList" :key="item.id" :arrow="false"><u-icon v-if="defaultName == item.name" slot="right-icon" name="checkbox-mark" color="#f00" size="36"></u-icon></u-cell-item>
					</u-cell-group>
				</mescroll-uni>
			</view>
		</view>
	</u-popup>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	props: {
		height: {
			default: null,
			type: Number
		},
		keyname: {
			default: null,
			type: String
		},
		defaultValue: {
			default: '',
			type: String
		},
		value: {
			default: false,
			type: Boolean
		},
		title: {
			default: '搜索关键词',
			type: String
		}
	},
	data() {
		return {
			keyword: '',
			searchResultList: [],
			defaultName: ''
		};
	},
	computed: {
		scrollHeight: function() {
			return this.height - uni.upx2px(104);
		}
	},
	watch: {
		defaultValue: {
			handler: function(newValue) {
				this.defaultName = newValue;
			},
			immediate: true
		},
		value: {
			handler: function(newValue, oldValue) {
				if (!oldValue && newValue) {
					this.keyword = '';
				}
			},
			immediate: true
		}
	},
	mounted() {
		// this.getData();
	},
	methods: {
		close() {
			this.$emit('input', false);
		},
		handleSearchBar(value) {
			this.$u.debounce(this.changeSearchBar, 700, false);
		},
		changeSearchBar() {
			this.searchResultList = [];
			this.mescroll.resetUpScroll(false);
		},
		getData(value = '') {
			this.$u.api
				.searchParamItem(this.keyname, value, this.mescroll.num)
				.then(res => {
					if (this.mescroll.num == 1) {
						this.searchResultList = res.data.data;
					} else {
						this.searchResultList.push(...res.data.data);
					}
					this.mescroll.endBySize(res.data.data.length, res.data.total);
				})
				.catch(e => {
					this.mescroll.endErr();
				});
		},
		/*上拉加载的回调*/
		upCallback() {
			this.getData(this.keyword);
			// 与 mescroll-body 的处理方式一致 >
		},
		clickItem(index) {
			this.defaultName = this.searchResultList[index].name;
			this.$emit('confirm', { value: this.defaultName });
		},
		search(value) {
			this.getData(value);
		},
		cancel() {
			this.close();
			this.$emit('cancel');
		}
	}
};
</script>

<style scoped lang="scss">
.search-popup-content {
	width: 750rpx;
	.search-bar {
		padding: 20rpx 10rpx 20rpx 30rpx;
	}
	.search-scroll {
		position: relative;
		overflow: hidden;
	}
}
</style>
